<template>
  <div>
    <a-button type="primary" style="margin-top: 20px" @click="editModal(0)">新建</a-button>
    <div style="margin-top: 20px">
      <a-table :pagination="false" :columns="columns" :data-source="data" rowKey="id">
      <span slot="state" slot-scope="state">
      <a-tag :color="state === -1? 'red' : 'cyan'">
        {{ state === -1 ? '禁用' : '使用中' }}
      </a-tag>
    </span>
        <span slot="action" slot-scope="text, record">
      <a-button type="primary" icon="edit" size="small" @click="editModal(record)"></a-button>
      <a-divider type="vertical" />
      <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
      更多 <a-icon type="down" />
    </a>
    <a-menu slot="overlay">
      <a-menu-item>
        <a href="javascript:;">禁用</a>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
    </span>
      </a-table>
      <div style="margin-top: 20px;text-align: center">
        <a-pagination v-model="current" :page-size="pageSize" :total="total" @change="changePage" />
      </div>
    </div>
    <div>
      <a-modal v-model="visible" title="编辑" @ok="handleOk">
        <a-form :form="form">

          <a-form-item>
            <a-input v-if="mdl.id > 0" v-decorator="['id', { initialValue: mdl.id } ]" hidden/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商户/公司简称">
            <a-input
              v-decorator="['merchantName',{ initialValue: mdl.merchantName },{rules: [{required: true,message: '请填写商户简称'}]}]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商户logo">
            <a-input
              hidden
              v-decorator="['logo']"/>
            <img v-if="mdl.logo" width="275px" height="175px" :src="mdl.logo" alt="">
            <a v-if="mdl.logo" @click="handlePicPathRemove('logo')">删除</a>
            <a-upload
              accept=".jpg, .jpeg, .png"
              :beforeUpload="beforeUpload"
              @change="handleLogoChange"
              v-if="!mdl.logo"
            >
              <a-button> <a-icon :type="logoLoading ? 'loading' : 'upload'" /> {{ logoLoading ? '上传中...':'选择图片'}} </a-button>
            </a-upload>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商户/公司全称">
            <a-input
              @change="initMerchantCode"
              v-decorator="['fullName',{ initialValue: mdl.fullName },{rules: [{required: true,message: '请填写商户全称'}]}]"/>
          </a-form-item>


          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商户Code">
            <a-input
              v-decorator="['merchantCode',{ initialValue: mdl.merchantCode }]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="网站域名">
            <a-input
              v-decorator="['domainName',{ initialValue: mdl.domainName }]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="网站图标">
            <a-input
              hidden
              v-decorator="['favicon']"/>
            <a-avatar v-if="mdl.favicon" :src="mdl.favicon" />
            <a v-if="mdl.favicon" @click="handlePicPathRemove('favicon')">删除</a>
            <a-upload
              accept=".ico"
              :beforeUpload="beforeUpload"
              @change="handleFaviconChange"
              v-if="!mdl.favicon"
            >
              <a-button> <a-icon :type="logoLoading ? 'loading' : 'upload'" /> {{ logoLoading ? '上传中...':'选择图片'}} </a-button>
            </a-upload>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="父级"
          >
            <a-select v-decorator="['parentId',{initialValue: mdl.parentId}]">
              <a-select-option :value="0">请选择父级</a-select-option>
              <a-select-option v-for="(item, index) in parentMerchants" :value="item.id" :key="index">{{ item.merchantName }}</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="负责人姓名">
            <a-input
              v-decorator="['director',{ initialValue: mdl.director }]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="邮箱">
            <a-input
              v-decorator="['email',{ initialValue: mdl.email }]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="联系电话">
            <a-input
              v-decorator="['phone',{ initialValue: mdl.phone }]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="地址">
            <a-input
              v-decorator="['address',{ initialValue: mdl.address }]"/>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="状态"
            hasFeedback
          >
            <a-select v-decorator="['state', { initialValue: mdl.state}]">
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="-1">禁用</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script>
  import {getMerchantList, saveUpdateMerchant } from "../../api/system";
  import pinyin from "../../utils/pyconst"
  import {compressByImg} from "../../utils/imgUtil";
  import {uploadImgByBase64} from "../../api/common";
  const columns = [
    {
      title: '编号ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '商户值',
      key: 'merchantCode',
      dataIndex: 'merchantCode',
    },
    {
      title: '商户简名',
      key: 'merchantName',
      dataIndex: 'merchantName',
    },
    {
      title: '公司全名',
      dataIndex: 'fullName',
      key: 'fullName',
    },
    {
      title: '域名',
      dataIndex: 'domainName',
      key: 'domainName',
    },
    {
      title: '负责人名称',
      key: 'director',
      dataIndex: 'director',
    },
    {
      title: '邮箱',
      key: 'email',
      dataIndex: 'email',
    },
    {
      title: '手机号码',
      key: 'phone',
      dataIndex: 'phone',
    },
    {
      title: '地址',
      key: 'address',
      dataIndex: 'address',
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
      scopedSlots: { customRender: 'state' },
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: { customRender: 'action' },
    },
  ];
  export default {
    name: "SysMerchantList",
    data() {
      return {
        visible: false,
        logoLoading:  false,
        mdl: {
          merchantCode: '',
          merchantName: '',
          fullName: '',
          director: '',
          domainName: '',
          email: '',
          phone: '',
          address: '',
          state: 1,
          parentId: 0,
          logo: '',
          favicon: ''
        },
        data: [],
        current: 1,
        columns,
        pageSize: 15,
        total: 0,
        form: '',
        parentMerchants: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        },
      }
    },
    mounted() {
      this.getSysMerchantData();
    },
    methods: {
      changePage() {
        this.data= []
        this.getSysMerchantData();
      },
      async getSysMerchantData() {
        let params = {
          pageNo: this.current,
          pageSize: this.pageSize
        }
        const result = await getMerchantList(params)
        const pageInfo = result.data.page
        this.total = pageInfo.totalPage
        this.data = pageInfo.list
      },
      async merchantList() {
        const result = await getMerchantList({pageNo:1,pageSize:100})
        let pageInfo = result.data.page
        this.parentMerchants = pageInfo.list
      },
      initMerchantCode(e) {
        this.mdl.merchantCode = ''
        let upperCase = pinyin.getFirstChar(e.target.value)
        this.mdl.merchantCode = upperCase.toLowerCase()
      },
      editModal(record) {
        this.mdl = Object.assign({}, record === 0 ? this.mdl : record)
        this.merchantList()
        this.form = this.$form.createForm(this)
        this.visible = true
      },
      handleOk() {
        this.form.validateFields(async (err, values) => {
          const result = await saveUpdateMerchant(values)
          if (result.code > 0) {
            this.$ms('保存成功')
            this.form = this.$form.createForm(this)
            this.visible = false
            this.getSysMerchantData()
          } else {
            this.$me(result.message)
          }
        })
      },

      beforeUpload() {
        return false
      },
      handleLogoChange(info) {
        this.handleChange(info, 'logo')
      },
      handleFaviconChange(info) {
        this.handleChange(info, 'favicon')
      },
      async handleChange(info, prefix) {
        this.logoLoading = true
        const base64 = await compressByImg(info.file);
        const result =  await uploadImgByBase64({
          base64: base64,
          fileName: info.file.uid,
          parentPath: prefix + '_img'
        })
        if (result.code > 0) {
          this.mdl[prefix] = result.data.remoteUrl
          this.form.setFieldsValue({[prefix]: result.data.remoteUrl });
        } else {
          this.$me("上传失败")
        }
        this.logoLoading = false
      },
      handlePicPathRemove(prefix) {
        this.form.setFieldsValue({[prefix]: ''});
        this.mdl[prefix]= ''
      },

    }

  }
</script>

<style scoped>

</style>
